<template>
  <div id="app" class="app-container" :class="{ 'dark-theme': isDark }">
    <!-- 布局容器 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="app-header">
        <div class="header-left">
          <el-icon class="logo-icon"><Monitor /></el-icon>
          <h1 class="logo-text">OHOS架构分析</h1>
        </div>

        <div class="header-center">
          <el-menu
            :default-active="$route.path"
            mode="horizontal"
            router
            class="nav-menu"
          >
            <el-menu-item index="/dashboard">
              <el-icon><Odometer /></el-icon>
              <span>仪表盘</span>
            </el-menu-item>
            <el-menu-item index="/modules">
              <el-icon><Grid /></el-icon>
              <span>模块列表</span>
            </el-menu-item>
            <el-menu-item index="/analysis">
              <el-icon><DataAnalysis /></el-icon>
              <span>数据分析</span>
            </el-menu-item>
            <el-menu-item index="/memory">
              <el-icon><Cpu /></el-icon>
              <span>内存分析</span>
            </el-menu-item>
          </el-menu>
        </div>

        <div class="header-right">
          <!-- 产品选择器 -->
          <ProductSelector />

          <!-- 主题切换 -->
          <el-button
            :icon="isDark ? Sunny : Moon"
            circle
            @click="toggleTheme"
            class="theme-btn"
          />
        </div>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main class="app-main">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Monitor, Odometer, Grid, DataAnalysis, Cpu, Sunny, Moon } from '@element-plus/icons-vue'
import ProductSelector from './components/ProductSelector.vue'

// 主题状态
const isDark = ref(false)

// 切换主题
const toggleTheme = () => {
  isDark.value = !isDark.value
  const html = document.documentElement
  if (isDark.value) {
    html.classList.add('dark')
  } else {
    html.classList.remove('dark')
  }
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}

// 初始化主题
onMounted(() => {
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme === 'dark') {
    toggleTheme()
  }
})
</script>

<style lang="scss">
.app-container {
  height: 100vh;
  background-color: var(--el-bg-color);

  &.dark-theme {
    --el-bg-color: #1a1a1a;
    --el-text-color-primary: #e5eaf3;
    --el-text-color-regular: #cfd3dc;
    --el-border-color: #4c4d4f;
  }
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--el-border-color-light);
  background: var(--el-bg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .header-left {
    display: flex;
    align-items: center;

    .logo-icon {
      font-size: 28px;
      color: #409eff;
      margin-right: 12px;
    }

    .logo-text {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }

  .header-center {
    flex: 1;
    display: flex;
    justify-content: center;

    .nav-menu {
      border-bottom: none;
      background: transparent;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .theme-btn {
      border: 1px solid var(--el-border-color);
    }
  }
}

.app-main {
  padding: 24px;
  background: var(--el-bg-color-page);
  min-height: calc(100vh - 60px);
}

// 响应式设计
@media (max-width: 768px) {
  .app-header {
    padding: 0 16px;

    .header-left .logo-text {
      font-size: 16px;
    }

    .header-center {
      .nav-menu {
        .el-menu-item__title {
          display: none;
        }
      }
    }
  }

  .app-main {
    padding: 16px;
  }
}

// 全局样式重置
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
</style>